<!DOCTYPE html>
<!-- Reader -->
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/reader_search_resault(no).css">
    <link rel="stylesheet" href="css/reader_borrow_info.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="js/JsBarcode.all.js"></script>
    <script type="text/javascript">
        //正则表达式
        function getQueryString(name)
        {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        }
        function readerhome(){
            var name = getQueryString("name");
            var phone=getQueryString("phone");
           $("#readerhome").attr("href","/welcome?name=" + name + "&phone="+phone);
        }
        function aboutMeClick() {
            //window.open('/readerchangeinfo?username='+window.username,"_target")
            window.location.href='/readerchangeinfo?username='+getQueryString("name")+ "&phone=" + getQueryString("phone");
        }
        function home(){
            window.location.href = "/reader_searchbook(in)?name=" + getQueryString("name") + "&phone=" + getQueryString("phone");
        }
        function reader(){
            window.location.href = "/readerfinerecord?name=" + getQueryString("name") + "&phone=" + getQueryString("phone");
        }
        $(function(){
            var rname=getQueryString("rname");
            var phone=getQueryString("phone");
            var start_time=getQueryString("start_time");
            var end_time=getQueryString("end_time");
            //$("#name").html(rname)
            //$(".readerhome").attr("href","/welcome?name=" + rname +"&phone="+phone);
            $.ajax({
                url : "/reader_borrow",
                type : "post",
                data : {
                    "phone":phone,
                },
                success : function (data) {
                    console.log(data);
                    var t = "";
                    for (var i = 0; i < data.length; i++) {
                        if(data[i].endtime){
                            if (data[i].days>30)
                                data[i].days = data[i].days - 30;
                            t += "<tr>" +
                                "<td class='tiaoxingma'> <img class='code' style='width: 150px;height: 75px'><span style='display: none'>" + data[i].id + "</span></td>" +
                                "<td>" + data[i].bname + "</td>" +
                                "<td>" + data[i].starttime + "</td>" +
                                "<td>" + data[i].endtime + "</td>" +
                                "<td>" + data[i].days + "</td>" +
                                "<td>" + data[i].fine + "</td>" +
                                "</tr>";
                        }else{
                            t += "<tr>" +
                                "<td class='tiaoxingma'> <img class='code' style='width: 150px;height: 75px'><span style='display: none'>" + data[i].id + "</span></td>" +
                                "<td>" + data[i].bname + "</td>" +
                                "<td>" + data[i].starttime + "</td>" +
                                "<td>" + "</td>" +
                                "<td>" + "</td>" +
                                "<td>" + "</td>" +
                                "</tr>";
                        }
                    }
                    console.log(t);
                    $("#content").html(t);
                    for (var i = 0; i < data.length; i++){
                        console.log(data[i].id);
                        $(".code").eq(i).JsBarcode(data[i].id);
                    }
                    $("#content tr").bind("click", function(){
                        var id = this.getElementsByTagName("td")[0].innerText;
                        var bname=this.getElementsByTagName("td")[1].innerText;
                        var start_time = this.getElementsByTagName("td")[2].innerText;
                        var end_time = this.getElementsByTagName("td")[3].innerText;
                        var days = this.getElementsByTagName("td")[4].innerText;
                        var fine = this.getElementsByTagName("td")[5].innerText;
                        console.log(id + "," + bname+"," + start_time + "," + end_time +","+days+","+fine);
                    })
                }
            });

        });
    </script>
</head>
<body>
<div class="main">
    <header class="header clearfix">
        <i class="iconfont icon-yun"></i>
        <i>Library</i>
        <i class="iconfont icon-yonghu"></i>
        <i id="name"></i>
        <a href="/reader_searchbook(no)" class="logout">Logout</a>
        <ul class="topmenu clearfix">
            <li><span id="home" onclick="home()" style="color: #fff;cursor: pointer">Home</span></li>
            <li><a id="readerhome" onclick="readerhome()" style="cursor: pointer">Reader Home</a></li>
            <li><span id="reader" onclick="reader()" style="color: #fff;cursor: pointer">Fine</span></li>
            <li><a onclick="aboutMeClick()" href="javascript:">About me</a></li>
        </ul>
    </header>
    <div class="table">
        <table class="result">
            <thead>
            <!-- table row -->
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Start Time</th>
                <th>End Time</th>
                <th>Overdue(day)</th>
                <th>Fine(yuan)</th>
            </tr>
            </thead>
            <tbody id="content">

            </tbody>
        </table>
    </div>
    <footer class="footer">
        <div class="mandarin">
            <img src="images/mandarin.png" alt="">
        </div>
        <p>Shan ICP number18018134 | Powered by 1713011</p>
    </footer>
</div>
</body>
</html>